<template>
	<!--登录 -->
	<view class="page-content">
		<!-- 标题栏和状态栏占位符 -->
		<!-- <view class="titleNview-placing"></view> -->
		<view class="page-top">提示：至少创建一个品牌。</view>
		<view class="page-body">
			<view class="box-row">
				<brand-upload :params="objdata" @delFile="delFile" :type="type" :required="true" @select="select" @progress="progress" @success="success" @fail="fail">
				</brand-upload>
			</view>
			<view class="btn-row">
				<button type="primary" class="" @tap="tobrand">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getOssUploadsParams,
		addCompanys,editCompanys
	} from '@/common/api.js';
	import store from '@/store'
	import wTit from '@/components/w-tit/w-tit-back.vue';
	import brandUpload from '@/pages/components/brand_upload.vue'
	
	export default {
		components: {
			wTit,
			brandUpload
		},
		data() {
			return {
				objdata: {
					id:'',
					title: '',
					img: [],
					logo_img: ''
				},
				type:'',
				formdata: {
					accessid: '',
					callback: '',
					dir: '',
					expire: '',
					host: '',
					policy: '',
					signature: ''
				},
				id: '',
				progres:0,
				pageType:'',
			}
		},
		computed: {
			...mapGetters(['token']),
		},
		onShow() {
			this.getdata();
		},
		onLoad(option) {
			console.log(222,option)
			if (option.type === 'add') {
				// 导航栏多语言
				uni.setNavigationBarTitle({
					title: '创建品牌'
				});
				this.type = option.type;
				if (option.id) {
					this.id = option.id;
				}
			} else if (option.type === 'edit') {
				// 导航栏多语言
				uni.setNavigationBarTitle({
					title: '编辑品牌'
				});
				this.type = option.type;
				this.objdata.title = option.title;
				this.objdata.id = option.id;
				this.objdata.logo_img = option.logo_img;
			}
			if(option.pageType){
				this.pageType = option.pageType
			}
		},
		methods: {
			...mapActions('user', ['setToken']),
			delFile(){
				this.objdata.logo_img = '';
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				let _self = this ;
				let token = uni.getStorageSync('token_key');
				let filename = e.tempFiles[0]
				let file_path = e.tempFilePaths[0]
				let suffix = "."+filename.extname;
				let file_name = new Date().getTime() + Math.random().toString(36).substring(3, 20) + suffix
				console.log(312,file_name,filename)
				getOssUploadsParams().then(res=>{
					console.log(123,res)
					let uploadTask = uni.uploadFile({
					    url: res.data.host,
					    filePath: file_path,
					    fileType: 'image',
					    name: 'file',
					    formData: {
					        name: file_path,
					        'key': res.data.dir+file_name,
					        'policy': res.data.policy,
					        'OSSAccessKeyId': res.data.accessid,
					        'success_action_status': '200',
					        //让服务端返回200,不然，默认会返回204
					        'signature': res.data.signature,
					    },
					    success: (res2) => {
					        console.log('uploadImage success, res is:', res2)
							_self.objdata.logo_img = res.data.host + '/office/'+ file_name;
					        uni.showToast({
					            title: '上传成功',
					            icon: 'success',
					            duration: 1000
					        });
					    },
					    fail: (err) => {
					        console.log('uploadImage fail', err);
					        uni.showModal({
					            content: err.errMsg,
					            showCancel: false
					        });
					    }
					});
					uploadTask.onProgressUpdate((res) => {
					    console.log("上传进度" + res.progress);
					    this.progres = res.progress;
					});
				})
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			//获取oss签名信息
			getdata() {
				getOssUploadsParams().then(res => {
					if (res.code === 2000) {
						this.formdata = res.data;
					}
					console.log(123, this.formdata)
				})
			},
			tobrand() {
				console.log(33,this.objdata)
				if (this.objdata.title === "") {
					uni.showToast({
						title: "品牌名称不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.objdata.logo_img === "") {
					uni.showToast({
						title: "品牌LOGO不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(this.pageType==='1'){
					if(this.type==='add'){
						addCompanys(this.objdata).then(res => {
							if (res.code === 2000) {
								uni.navigateBack({
									delta:1
								})
								setTimeout(() => {
								    uni.showToast({
								    	title:'添加成功！',
								    	icon:'none',
								    	duration:2000
								    })
								}, 100)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
					}else if(this.type === 'edit'){
						editCompanys(this.objdata).then(res => {
							if (res.code === 2000) {
								uni.navigateBack({
									delta:1
								})
								setTimeout(() => {
								    uni.showToast({
								    	title:'编辑成功！',
								    	icon:'none',
								    	duration:2000
								    })
								}, 100)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
					}
				}else if(this.pageType==='2'){
					addCompanys(this.objdata).then(res => {
						if (res.code === 2000) {
							uni.switchTab({
								url: '/pages/index/index?id=${res.data.id}',
							});
							setTimeout(() => {
							    uni.showToast({
							    	title:'添加成功！',
							    	icon:'none',
							    	duration:2000
							    })
							}, 100)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
				
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}

	.icon-tb {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		background: $uni-bg-color;
		width: 100vw;
		height: 100vh;

		.page-top {
			height: 80rpx;
			background: $uni-bg-color-grey;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: $uni-text-color;
			padding: 0 30rpx;
			line-height: 80rpx;
		}

		.page-body {
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;

			.box-row {
				margin-bottom: 180rpx;
			}

			.btn-row {
				width: 100%;

				button {
					line-height: 100rpx;
					background: $uni-but-bg-color;
					font-size: 36rpx;
					color: $font-color-w;
					height: 100rpx;
					box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.19);
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
